<!-- 弹窗 -->
<script lang="ts" setup>
import { ref, watch } from 'vue'
const emits = defineEmits(['update:modelValue'])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '标题'
  },
  width: {
    type: String,
    default: '800px'
  },
  top: {
    type: String,
    default: '5vh'
  },
  /**
   * 其他el-dialog的属性
   */
  options: {
    type: Object,
    default() {
      return {}
    }
  }
})
// 是否打开弹窗
const showDialog = ref(false)

watch(props, (newProps) => {
  showDialog.value = newProps.modelValue
})

function closeEvt() {
  emits('update:modelValue', false)
}
</script>

<template>
  <el-dialog
    class="dui-dialog-bg"
    v-model="showDialog"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
    :width="width"
    :top="top"
    v-bind="options"
    @close="closeEvt"
  >
    <template #header>
      <div class="dui-dialog-title">{{ title }}</div>
    </template>

    <slot></slot>

    <template #footer>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.dui-dialog-bg {
  .dui-dialog-title {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }
  .dui-dialog-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 20px;
    margin-right: 4px;
    background-color: $color-primary;
  }
  .el-dialog__body {
    padding: 0 20px;
    max-height: 80vh;
    overflow-y: auto;
  }
}
</style>
